{% extends "base.html" %}
{% load goal_extras %}
{% block header %}
    <table>
        <tr>
            <td style="width: 60%">
                <h1>Active Goals</h1>
            </td>
            <td>
                <a href="/goals/add/" class="btn">Create Goal</a>
                <a class="btn">Reorder Goals</a>
                <a class="btn">Vision Board</a>
            </td>
        </tr>
    </table>
{% endblock %}

{% block content %}
    {% if message %}
        <div id="alert_id" class="alert-block alert-success">
            <button class="close" data-dismiss="alert_id">×</button>
            {{ message }}
        </div>
    {% endif %}
    <script>
        function saveModifiedGoal(goalId) {
            var editor = $('#edit_goal' + goalId);
            data = {
                csrfmiddlewaretoken:'{{ csrf_token }}',
                goal:goalId,
                name:$('#name', editor).val(),
                description:$('#description', editor).val(),
                start_date:$('#start_date', editor).val(),
                due_date:$('#due_date', editor).val(),
                categories:$('#categories', editor).val(),
                show_on_dashboard:$('#show_on_dashboard', editor).val()
            };
            $.ajax({
                context:this,
                type:"POST",
                dataType:'json',
                url:"/goals/",
                data:data,
                success:function (data) {
                    var main = $('#main_goal' + goalId);
                    main.effect("highlight", {color:'#00dd00'}, 2000)
                },
                error:function (e, xhr) {
                    console.log(e);
                }
            });
        }
        /**
         *
         * @param url
         * @param editor
         * @param Id
         * @param fields
         */
        function saveModifiedForm(entity, url, editor, id, fields, blinkingDiv) {
            var editor = $('#' + editor + id);
            data = {
                csrfmiddlewaretoken:'{{ csrf_token }}',
            };
            data[entity] = id
            for (i in fields) {
                data[fields[i]] = $('#' + fields[i], editor).val();
            }
            $.ajax({
                context:this,
                type:"POST",
                dataType:'json',
                url:url,
                data:data,
                success:function (data) {
                    var main = $('#' + blinkingDiv + id);
                    for (key in data) {
                        $('#' + key, main).val(data[key]);
                        $('#' + key, main).val("fall");
                    }
                    main.effect("highlight", {color:'#00dd00'}, 2000)
                },
                error:function (e, xhr) {
                    console.log(e);
                }
            });
        }
    </script>
    {% for data in datas %}
        {% with goal=data.0 form=data.1 %}
            {% comment %}
            HEADER
        {% endcomment %}
            <table style="width: 100%">
                <tr>
                    <td style="width: 70%">
                        <h3><a href="/tasks{{ goal.pk }}/"> {{ goal.name }}</a></h3>
                    </td>
                    <td><a href="/goals/edit/{{ goal.pk }}/"><img src="{{ STATIC_URL }}img/document_a4_edit.png"/>
                        Edit</a></td>
                    <td>
                        <a href="/goals/delete/{{ goal.pk }}"><img src="{{ STATIC_URL }}img/remove.png"/> Delete</a>
                    </td>
                    <td><a href="/calendar/{{ goal.pk }}"><img src="{{ STATIC_URL }}img/calendar_week.png"/>
                        Calendar</a></td>
                </tr>
            </table>
            <hr style="color:#666666;border:outset;">
            {% comment %}
            Base infos
        {% endcomment %}
            <table style="width: 100%;" cellpadding="0" cellspacing="0">
                <tr>
                    <td style="width: 10%">icon</td>
                    <td style="width: 10%">
                        Tasks:
                        <a href="/tasks{{ goal.id }}/">
                            {{ goal.completed_task_set.all|length }}/{{ goal.task_set.all|length }}
                        </a>
                    </td>
                    <td style="width: 50%">Due {{ goal.due_date }} <font class="grey">({{ goal|time_left }})</font>
                    </td>
                    <td style="width: 25%">
                        <div class="progress progress-striped progress-success active">
                            <div class="bar" style="width: {{ goal|percentage }};vertical-align: middle"></div>
                        </div>
                    </td>
                    <td style="width: 5%">{{ goal|percentage }}</td>
                </tr>
            </table>
            <div class="container" style="background-color: #b3b3b3;">
                <div class="row">
                    <div class="span2">
                        IMG
                    </div>
                    <div class="span10"
                         style="width: 90%;background-color: #ffffff;margin-bottom:10px;border: 1px ridge">
                        <div id="description">
                            {{ goal.description|safe }}
                        </div>

                        <table style="width: 30%;margin-top:20px;">
                            <tr style="vertical-align: top">
                                <td class="grey">Category</td>
                                <td>
                                    {% for category in goal.category_set.all %}
                                        <a href="/goals/category/{{ category.tag.pk }}/">{{ category.tag.name }}</a>
                                        {% if not forloop.last %}
                                            ,
                                        {% endif %}
                                    {% endfor %}
                                </td>
                            </tr>
                            <tr>
                                <td class="grey">Start date</td>
                                <td>
                                    {{ goal.start_date }}
                                </td>
                            </tr>
                        </table>
                    </div>
                    {% comment %}
                    SUB GOALS
                {% endcomment %}
                    {% if goal.goal_set.all %}
                        <div class="span10"
                             style="width: 90%;background-color: #ffffff;margin-bottom:10px;border: 1px ridge">
                            {% for sub_goal in goal.goal_set.all %}
                                <table style="width: 100%;" cellpadding="0" cellspacing="0" border="0">
                                    <tr>
                                        <td style="width: 10%" rowspan="2">icon:</td>
                                        <td><a href="/goals/edit/{{ sub_goal.pk }}/"><h5>{{ sub_goal.name }}
                                            ({{ sub_goal|percentage }})</h5></a></td>
                                        <td></td>
                                        <td style="width: 25%" rowspan="2">
                                            <div class="progress progress-striped progress-success active">
                                                <div class="bar"
                                                     style="width: {{ sub_goal|percentage }};vertical-align: middle"></div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 10%">Tasks: <a
                                                href="/tasks{{ sub_goal.id }}/">{{ sub_goal.completed_task_set.all|length }}/{{ sub_goal.task_set.all|length }}
                                        </a>
                                        </td>
                                        <td style="width: 50%">Due {{ sub_goal.due_date }} <font
                                                class="grey">({{ sub_goal|time_left }})</font></td>
                                        <td style="width: 5%">{{ sub_goal|percentage }}</td>
                                    </tr>
                                </table>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                <a href="???" class="btn">On Back Burner</a>
                <a href="/goals/add/sub/{{ goal.pk }}/" class="btn">Add Subgoal</a>
                <a href="???" class="btn">Reorder Subgoals</a>
                <a href="/goals/add/copy/{{ goal.pk }}/" class="btn">Copy Goal</a>
                <a href="/tasks{{ goal.pk }}/" class="btn">Edit Tasks</a>
            </div>
        {% endwith %}
    {% empty %}
    {% endfor %}



{% endblock content %}